<template>
    <a-modal title="切换销售模式" class="mode-switch-modal" :width="360" :visible="true" cancel-text="取消[Esc]" ok-text="确认[Enter]" @ok="handleOk" @cancel="handleCancel">
        <div :class="['mode-switch-item',{'active':cashierModeEnum.SETTLE === state.current}]">
            收银模式
        </div>
        <div :class="['mode-switch-item',{'active':cashierModeEnum.VERIFICATION === state.current}]">
            核销模式
        </div>
    </a-modal>
</template>
<script lang="ts" setup>
import { reactive,onMounted,onBeforeUnmount,nextTick,ref } from "vue";
import { GoodsService,PackageService} from "@/service/index";
import { message } from "ant-design-vue";
import { cashierModeEnum } from "@/type";


const state = reactive<{
    goodsList:any[];
    current:cashierModeEnum;
}>({
    goodsList:[],
    current:1
})

const emit = defineEmits<{
    (e:"ok",value:any):void,
    (e:"cancel"):void
}>()

onMounted(async()=>{
    window.addEventListener("keydown",handleKeydown)
})

onBeforeUnmount(()=>{
    window.removeEventListener("keydown",handleKeydown)
})

const handleKeydown = (e:any)=>{
    e.preventDefault();
    const code = e.code;
    if(code === "ArrowDown"){
        state.current++;
        if(state.current>2)state.current=1;
    }else if(code === "ArrowUp"){
        state.current--;
        if(state.current<1)state.current=2;
    }else if(code === "Enter" || code==="NumpadEnter"){
        handleOk()
        return
    }else if(code === "Esc"){
        console.log("ecs--->")
        handleCancel()
        return
    }

}


const handleOk = ()=>{
    let val = state.current;
    if(val){
        emit("ok",val);
    }else{
        return message.error("没有选择商品")
    }
}

const handleCancel = ()=>{
    emit("cancel");
}

</script>

<style lang="less" >

.mode-switch-item{
    border:1px solid #ddd;
    color:gray;
    font-size: 18px;
    padding: 10px;
    border-radius: 10px;
    margin: 10px auto 20px;
    width: 200px;
    text-align: center;
}

.mode-switch-item.active{
    border:1px solid #7546c9;
    color: #7546c9;
}

</style>